<template>
  <div class="img-select">
    <div class="pop-title">{{props.setType === 'header' ? '页眉图片':'背景图片'}}</div>
    <div class="img-list">
      <div class="img-item" v-for="(item,index) in imgResource" :key="index" @click="setImg(item.url)">
        <img :src="item.url" alt="">
        <el-icon :class="{'icon-success':currentImgUrl == item.url}">
          <SuccessFilled />
        </el-icon>
      </div>
    </div>
    <div class="img-upload" @click="handleUpload">
      <el-icon>
        <Plus />
      </el-icon>使用本地文件
    </div>
  </div>

</template>

<script setup>
/* eslint-disable */
import { ref, defineProps, defineEmits, onMounted } from "vue";
import { Plus, SuccessFilled } from '@element-plus/icons-vue'
import { getRecommendHeaderImg, getRecommendBackImg } from "@/api/formDesign";

const props = defineProps({
  setType: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['changeImg','update:uploadDialog','update:uploadType'])
const handleUpload = () => {
  emits('update:uploadDialog',true)
  emits('update:uploadType',props.setType)
}
const currentImgUrl = ref()

// 设置图片(页眉或背景)
const setImg = (url) => {
  emits('changeImg',props.setType,url)
  currentImgUrl.value = url
}
//获取系统推荐图片
const imgResource = ref()
const getHeaderImg = async () => {
  let res = await getRecommendHeaderImg()
  try{
    if(res.code === 20000){
      imgResource.value = res.data
    }
  }catch{
    imgResource.value = []
  }
}
const getBackImg = async () => {
  let res = await getRecommendBackImg()
  try{
    if(res.code === 20000){
      imgResource.value = res.data
    }
  }catch{
    imgResource.value = []
  }
}
onMounted(() => {
  if(props.setType === 'background'){
    // getBackImg()
  }
  if(props.setType === 'header'){
    // getHeaderImg()
  }
})

</script>

<style lang="scss" scoped>
.img-list{
    display: flex;
    flex-wrap: wrap;
    width: 544px;
    .img-item{
        position: relative;
        width: 130px;
        height: 40px;
        border-radius: 8px;
        overflow: hidden;
        margin: 5px 3px;
        cursor: pointer;
        img{
            width: 100%;
            height: 100%;
        }
        .icon-success{
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 20px;
            color: #4499fd;
        }
    }
}
.img-upload{
    margin-top: 15px;
    color: #4499fd;
    cursor: pointer;
}
</style>
